<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云顶邮箱</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="iconfont/iconfont/iconfont.css">
</head>
<body>
    <div class="zuiwaiceng">
        <div class="waiceng">
            <!-- 头部 -->
             <br>
            <div class="head">
                <span><img src="images/云顶logo_03.png" alt="" class="img">
                <h5>欢迎回来</h5>
                </span>
                <span></span>
                <span><img src="images/本人.png" alt="" class="img"></span>
            </div>
            <br>
            <!-- 中间栏 -->
             <div class="lanmu">
                <div class="dandu"><a href="#">今日</a></div>
                <div class="dandu"><a href="#">讯息</a></div>
                <div class="dandu"><a href="#">服务</a></div>
                <div class="dandu"><a href="#">校园</a></div>
                <div class="dandu"><a href="#">我的</a></div>
             </div>
             <!-- 中下层 -->
            <div class="xiaceng">
                <div class="biaoshi">
                    <h3>邮件动态-收件箱</h3>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li><a href="#" class="iconfont icon-lianxiren "></a></li>
                    <li><a href="#" class="iconfont icon-shipin "></a></li>
                </div>
                <!-- 下层 -->

                 <!-- <div style="display: flex;"> -->
                <!-- 左侧栏 -->
                <div class="triangle1"><div class="weidu"><button>未</button>&nbsp;<button>读</button></div></div>
                <div class="triangle2"><div class="yidu"><button>已</button>&nbsp;<button>读</button></div></div>
                <!-- 拖动栏 -->
                <div class="xiala">
                <div class="xinxi"><div class="tab"></div><img src="images/用户1.png" alt="" class="img"><div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span><div class="de_re"><a href="#">删除</a></div><div class="de_re"><a href="#">恢复</a></div></div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户2.png" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户3.png" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户4.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户5.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户6.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户7.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户8.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户9.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户10.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户11.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                <div class="xinxi"><div class="tab"></div><img src="images/用户12.jpg" alt="" class="img">
                <div class="tab"></div><span class="neirong">邮件缩略信息。。。</span><span class="neirong">2024.2.20</span>
                <div class="de_re"><a href="#">删除</a></div>
                <div class="de_re"><a href="#">恢复</a></div>
                </div>
                </div>
                <!-- </div> -->
            </div>
              <!-- diceng -->
               <div class="diceng"><img src="images/底部装饰.png" alt=""></div>
        </div>
    </div>
</body>
</html> 